<template>
  <div class="container">
    <div class="top_row">
      <div class="content">
        <a-select name="voice" v-model:value="selectValue" id="select">
          <a-select-option :value="i" v-for="(o, i) in sVoicesOps">{{
            o
          }}</a-select-option>
        </a-select>
        <a-textarea v-model:value="inputTxt" :rows="4" />
        <a-button @click="playVideo">Start</a-button>
        <a-button @click="onEnd">End</a-button>
      </div>
      <a-form :model="audioConfig" layout="inline">
        <a-form-item label="音调(0 - 2)" name="pitch">
          <a-input-number step="0.1" v-model:value="audioConfig.pitch" />
        </a-form-item>

        <a-form-item label="语速(0.1-10)" name="rate">
          <a-input-number step="0.1" v-model:value="audioConfig.rate" />
        </a-form-item>

        <a-form-item label="音量(0 - 1)" name="volume">
          <a-input-number step="0.1" v-model:value="audioConfig.volume" />
        </a-form-item>
      </a-form>
    </div>
    <div class="chat_row">
      <a-textarea v-model:value="chatInput" :rows="4" />
      <a-button @click="toChat">发送</a-button>
    </div>
  </div>
</template>
<script setup>
import axios from '@/utils/axios';
import { ref, onMounted, reactive, toRefs } from 'vue';

const sVoicesOps = [
  '机器女',
  '感情女',
  '播音女',
  '香港1',
  '香港2',
  '香港3',
  '好听',
  '女孩',
  '讲故事男',
  '年轻男',
  '小男孩',
  '播音男',
  '辽宁',
  '台湾1',
  '台湾2',
  '台湾3',
  'sahnxi',
];
const data = reactive({
  inputTxt: '这座位于帝国广阔疆域西北端的军事边城',
  audioConfig: {
    pitch: '0.6',
    rate: '1.6',
    volume: '1',
  },
  selectValue: 0,
  chatInput: '',
  sVoices: [],
});
const { audioConfig, inputTxt, selectValue, chatInput, sVoices } = toRefs(data);
const synth = window.speechSynthesis;
const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
utterThis.lang = 'zh-CN'; // 语言

onMounted(() => {
  let voices;
  const loadVoices = () => {
    voices = synth.getVoices();
    sVoices.value = voices.filter((o) => o.lang.startsWith('zh-'));
  };
  if ('onvoiceschanged' in synth) {
    synth.onvoiceschanged = loadVoices;
  } else {
    loadVoices();
  }
});

const playVideo = (event) => {
  startVoice(inputTxt.value);
};

const startVoice = (text) => {
  const { pitch, rate, volume } = audioConfig.value;
  utterThis.pitch = pitch; // 音调 0-2
  utterThis.rate = rate; // 语速 0.1-10
  utterThis.volume = volume; // 音量 0-1
  // 3 好听 4 女孩 5 讲故事  6年轻男的 7小男孩 8 播音
  utterThis.voice = sVoices.value[selectValue.value];
  console.log(selectValue.value, sVoices.value[selectValue.value]);
  utterThis.text = text;
  synth.speak(utterThis);
};

const toChat = () => {
  axios.get(`/qwenchat/getChat?chatInput=${chatInput.value}`).then((res) => {
    console.log(res.data, '---');
    startVoice(res.data.content);
  });
};

const onEnd = () => {
  synth.cancel();
};
</script>

<style lang="scss" scoped>
.top_row {
  background-color: #fff;
}

.content {
  display: flex;
}
.adjust {
  margin-top: 20px;
}
.ant-select {
  width: 200px;
}
</style>
